<template>
  <div class="dashboard-container">
    <!-- 侧边栏 -->
    <div class="sidebar">
      <div class="logo-section">
        <h3>测盟汇管理系统</h3>
      </div>

      <div class="menu-section">
        <div class="menu-item" :class="{ active: $route.path === '/dashboard/overview' }"
          @click="$router.push('/dashboard/overview')">
          📊 系统概览
        </div>
        <div class="menu-item" :class="{ active: $route.path === '/dashboard/users' }"
          @click="$router.push('/dashboard/users')">
          👥 用户管理
        </div>
        <div class="menu-item" :class="{ active: $route.path === '/dashboard/dynamics' }"
          @click="$router.push('/dashboard/dynamics')">
          📰 行业动态
        </div>
        <div class="menu-item" :class="{ active: $route.path === '/dashboard/courses' }"
          @click="$router.push('/dashboard/courses')">
          📚 课程管理
        </div>
        <div class="menu-item" :class="{ active: $route.path === '/dashboard/meetings' }"
          @click="$router.push('/dashboard/meetings')">
          📅 会议管理
        </div>
        <div class="menu-item" @click="$router.push('/analytics')">
          📊 数据分析
        </div>
        <div class="menu-item" @click="$router.push('/workflow')">
          🤖 工作流
        </div>
        <div class="menu-item" @click="$router.push('/assistant')">
          💬 AI助手
        </div>
      </div>
    </div>

    <!-- 主内容区 -->
    <div class="main-content">
      <div class="header">
        <h1>{{ getPageTitle() }}</h1>
        <div class="user-info">
          <span>{{ username }} ({{ userType === 'admin' ? '超级管理员' : '企业用户' }})</span>
          <el-button @click="handleLogout" type="danger" plain>退出登录</el-button>
        </div>
      </div>

      <div class="content">
        <!-- 子路由内容将在这里渲染 -->
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, onMounted, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'

export default {
  name: 'Dashboard',
  setup() {
    const router = useRouter()
    const route = useRoute()
    const userType = ref('')
    const username = ref('')

    const getPageTitle = () => {
      // 从路由元信息中获取标题
      return route.meta.title || '测盟汇管理系统';
    }

    const handleLogout = () => {
      localStorage.removeItem('isLoggedIn')
      localStorage.removeItem('userType')
      localStorage.removeItem('username')

      ElMessage.success('已退出登录')
      router.push('/')
    }

    onMounted(() => {
      userType.value = localStorage.getItem('userType') || 'enterprise'
      username.value = localStorage.getItem('username') || '用户'
    })

    return {
      userType,
      username,
      getPageTitle,
      handleLogout
    }
  }
}
</script>

<style scoped>
.dashboard-container {
  display: flex;
  height: 100vh;
}

.sidebar {
  width: 250px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  display: flex;
  flex-direction: column;
}

.logo-section {
  padding: 20px;
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.logo-section h3 {
  margin: 0;
  font-size: 18px;
}

.menu-section {
  flex: 1;
  padding: 20px 0;
}

.menu-item {
  padding: 15px 20px;
  cursor: pointer;
  transition: all 0.3s;
  border-left: 4px solid transparent;
}

.menu-item:hover,
.menu-item.active {
  background-color: rgba(255, 255, 255, 0.1);
  border-left-color: #fff;
}

.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  background-color: #f5f5f5;
}

.header {
  background: white;
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.header h1 {
  margin: 0;
  color: #333;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 15px;
}

.content {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
}
</style>